/**
 * Author: Lily Jiang
 * Create Time: 2019/12/24
 * Description:
 */

import React from "react";
import { connect } from "react-redux";
import * as actions from "@/store/actions";
import './Index.scss'
import AppHeader from '@/components/appHeader/Index.js'
// import {Link} from 'react-router-dom'
import { ListView, PullToRefresh, Toast } from 'antd-mobile';
import PageHoc from '@/components/hoc/page.js'

class ArticleComments extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            total: 0
        };
    }

    lv;
    footerRef;
    mainRef;

    componentDidMount () {
    }

    pageInit = () => {
        this.props.loadFirstPage()
    }

    changeLoadingState = (status) => {
        this.props.dispatch(actions.updateAppSetting({
            appLoading: status
        }))
    }

    apiFn = (pageNo) => {
        return React.$api.articleComments({
            pageNo: pageNo,
            pageSize: this.props.pageSize,
            article_id: this.props.location.searchObj.articleId
        }).then(data => {
            this.setState({
                total: data.total || 0
            })

            return data
        })
    }

    getListViewHeight = () => {
        return this.mainRef.clientHeight - this.footerRef.clientHeight
    }

    goComment = (commentItem) => {
        if (this.props.isLogin) {
            let hash = '#/article/commentCreate?articleId=' + this.props.location.searchObj.articleId
            if (commentItem) {
                hash += ('&commentId=' + commentItem.id + '&title=' + commentItem.user.username)
            }
            window.location.hash = hash
        } else {
            window.location.hash = '#/login'
        }
    }

    like = (commentId, isLike) => {
        this.changeLoadingState(true)
        React.$api.commentLike({
            'comment_id': commentId,
        }).then(data => {
            this.setState({
                info: {
                    ...this.state.info,
                    is_like: parseInt(isLike) === 1 ? 0 : 1
                }
            })
            this.changeLoadingState(false)
        }, err => {
            this.changeLoadingState(false)
            err.msg && Toast.info(err.msg)
        })
    }

    //  获取item进行展示
    renderRow = (item, i) => {
        return (
            <div key={item.id.toString()} className="comment-item-wrap ubb_1px">
                <div className="header-img" style={{backgroundImage: `url(${item.user.head_img})`}}></div>
                <div className="df1 pl10">
                    <div className="username">{item.user.username}</div>
                    <div className="desc">{item.content}</div>
                    {
                        item.parent ? (
                            <div className="parent-comment">//{item.parent.user.username}：{item.parent.content}</div>
                        ) : ''
                    }
                    <div className="item-footer">
                        <div className="time df1">{item.create_time}</div>
                        <div className="btn" onClick={(e) => {this.like(item.id, item.is_like)}}>
                            <span>{item.like_count}</span>
                            <img src={parseInt(item.is_like) === 1 ? require("../../../assets/images/common/zan_lan.png") : require("../../../assets/images/common/zan_hui.png")} alt=""/>
                        </div>
                        <div className="btn" onClick={e => {this.goComment(item)}}>
                            <img src={require('../../../assets/images/common/pinglun_hui.png')} alt=""/>
                        </div>
                    </div>
                </div>
            </div>
        )
    }


    render() {
        return (
            <div className="app-container df-col page_article-comments">
                {<AppHeader title={this.state.total + '条评论'}></AppHeader>}

                <div className="main df1 of-y-a" ref={com => this.mainRef = com}>
                    {
                        this.props.list.length ?
                            <ListView
                                ref={el => this.lv = el}
                                dataSource={this.props.dataSource.cloneWithRows(this.props.list)}
                                renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
                                    {this.props.upLoading ? '加载中' : '没有更多内容'}
                                </div>)}
                                renderRow={(rowData, id1, i) => this.renderRow(rowData, i)}
                                style={{
                                    height: this.props.height,
                                    overflow: 'auto'
                                }}
                                initialListSize={10}
                                pageSize={this.props.pageSize}
                                scrollRenderAheadDistance={500}
                                onEndReached={this.props.onEndReached}
                                onEndReachedThreshold={20}
                                pullToRefresh={<PullToRefresh refreshing={this.props.pullLoading}
                                                              onRefresh={this.props.onRefresh}/>}
                            /> : null
                    }
                </div>

                <div className="footer ubt_1px" ref={com => this.footerRef = com}>
                    <div className="df-c input-wrap">
                        <div className="header-img" style={{backgroundImage: `url(${(this.props.userInfo && this.props.userInfo.head_img) || require('../../../assets/images/default/default_head.png')})`}}></div>
                        <div className="df1 pl10" onClick={e => {this.goComment(null)}}>说说你的看法...</div>
                    </div>
                </div>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        userInfo: state.app.user,
        isLogin: state.app.isLogin
    }
}

export default connect(mapStateToProps)(PageHoc()(ArticleComments))